<template>
	<view>

		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, i) in item" :key="i">

						<image :src="cell.img"></image>
						<view>
							{{cell.name}}
						</view>
						<image src="../../static/message/sex_man.png" class="sex" v-show="cell.sex==0"></image>
						<image src="../../static/message/sex_woman.png" class="sex" v-show="cell.sex==1"></image>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text: '',
				indexList: ["※", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",
					"R", "S",
					"t", 'V', 'W', 'X', 'Y', 'Z'
				],
				itemArr: [
					[{
						name: 'c冯哲明',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}],
					[{
						name: 'AAA中国电信',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'AAA中介小刘买房158xxx5417',
						sex: 1,
						checked: true,
						img: '../../static/message/order-img-three.png'
					}, {
						name: 'A居家门窗定制',
						sex: 0,
						img: '../../static/message/order-img-two.png'
					}, {
						name: 'AAO史密斯热水器',
						sex: 1,
						checked: true,
						img: '../../static/message/order-img-two.png'

					}, {
						name: '安倍晋四',
						sex: 0,
						checked: true,
						img: '../../static/message/order-img-two.png'

					}],

					[{
						name: 'BBB中国电信',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'BBB中介小刘买房158xxx5417',
						sex: 1,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'B居家门窗定制',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, ],
					[{
						name: 'BO史密斯热水器',
						sex: 1,
						checked: true,
						img: '../../static/icon/avatar.png'
					}],
					[{
						name: 'cc冯哲明',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'ccc冯哲明',
						sex: 1,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'ccc冯哲明',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, ],
					[{
						name: 'cc冯哲明',
						sex: 1,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'c冯哲明',
						sex: 0,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, {
						name: 'c冯哲明',
						sex: 1,
						checked: true,
						img: '../../static/icon/avatar.png'
					}, ],
				]

			};
		},
		methods: {
			checkboxChange(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss">
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		height: 105rpx;
		line-height: 105rpx;
		background-color: #fff;
		position: relative;

		.radio {
			margin-left: 18rpx;
		}

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 10rpx;
			margin: 16rpx 18rpx 0;

		}

		view {
			width: 80%;
			border-bottom: 1rpx solid rgb(235, 235, 235);
		}

		.sex {
			width: 25rpx;
			height: 25rpx;
			position: absolute;
			left: 68rpx;
			top: 66rpx
		}
	}

	.search {
		height: 120rpx;
		padding-left: 46rpx;
		display: flex;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-top: 46rpx;
			margin-right: 8rpx;
		}

		input {
			height: 100%;
			margin-left: 10rpx;
		}

		.phcolor {
			color: #0096FA;
		}
	}

	.mod_view {
		padding-left: 20rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-top: 1rpx solid #999;
	}

	.checkbox_ {
		width: 60rpx !important;
		border: none !important;
		margin-left: 20rpx;
	}

	.u-checkbox-group--row[data-v-2ef8bac9] {
		display: flex;
		flex-direction: column;
	}

	.u-index-list__letter[data-v-7e596c49] {
		display: none;
	}

	.bouttom_ {
		height: 135rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 150;
		background-color: #323233;
		background: rgb(245, 245, 245);

		button {
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			margin-left: 500rpx;
			margin-top: 30rpx;
			background: rgba(255, 42, 49, 0.5);
			border-radius:
				16rpx;
		}
	}
</style>